<template>
  <div class="btn-row">
    <div 
      v-for="(item, index) in animal"
      @click="chooseByanimal(index, item.name)"
      class="btn-item button-unselected"
      :class="item.selected ? 'active' : ''"
      :key="index"
      >
      {{item.name}}
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {

  },
  data() {
    return {
      animal: [
        {name: '鼠', color: '', selected: false},
        {name:'牛', color: '', selected: false}, 
        {name: '虎', color: '', selected: false},
        {name: '兔', color: '', selected: false},
        {name: '龙', color: '', selected: false},
        {name: '蛇', color: '', selected: false},
        {name: '马', color: '', selected: false},
        {name: '羊', color: '', selected: false}, 
        {name: '猴', color: '', selected: false},
        {name: '鸡', color: '', selected: false},
        {name: '狗', color: '', selected: false},
        {name: '猪', color: '', selected: false},
      ],
    }
  },
  methods: {
    chooseByanimal(index, condition) {
      this.animal.forEach((item, i) => {
        if (index !== i) {
          item.selected = false
        }
      })
      this.animal[index].selected = !this.animal[index].selected
      // this.changeState(index, selected)
      this.$emit('click', this.animal[index].selected ? condition : '')
    },
    clearState() {
      this.animal.forEach((item, i) => {
        item.selected = false
      })
    }
  },
  computed:{
    ...mapGetters('lottery', ['getCurrentLotteryState']),
    clonedItem() {
      return JSON.parse(JSON.stringify(this.getCurrentLotteryState[0]))
    }
  },
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .btn-row 
    display flex
    // justify-content space-between
    .btn-item 
      width calc((100% - 40px) / 4)
      height 40px 
      line-height 40px 
      text-align center
      margin 5px 0
      &.active 
          color #fff 
          background $color-theme-dark
      
</style>